<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《她与月亮的约定》小程序原型</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- TDesign 图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        /* 自定义TDesign风格变量 */
        :root {
            --td-brand-color: #A06CD5;
            --td-brand-color-light: #F0EAF6;
            --td-brand-color-hover: #B48EE0;
            --td-success-color: #6CD5A0;
            --td-warning-color: #F5C56B;
            --td-error-color: #E57373;
            --td-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            --td-text-color-primary: #1A0D28;
            --td-text-color-secondary: #5A5165;
            --td-text-color-placeholder: #9D96A5;
            --td-bg-color-page: #F7F5F9;
            --td-bg-color-container: #FFFFFF;
            --td-component-stroke: #E8E2EE;
            --td-shadow-1: 0 4px 8px rgba(0,0,0,0.04);
            --td-shadow-2: 0 8px 16px rgba(0,0,0,0.08);
            --td-radius-medium: 16px;
            --td-radius-default: 8px;
            --td-radius-small: 4px;
        }

        /* 页面容器样式 */
        .page-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 32px;
            padding: 32px;
            background-color: #EAEAEA;
        }

        /* iPhone 15 Pro 尺寸模拟 */
        .iphone-mockup {
            width: 393px;
            height: 852px;
            background-color: var(--td-bg-color-page);
            border-radius: 54px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 14px solid #1A1A1A;
            margin-bottom: 40px;
        }

        /* 顶部刘海区域 */
        .notch {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 34px;
            background-color: #1A1A1A;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
            z-index: 100;
        }

        /* iframe 样式 */
        .screen-content {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* 页面标题样式 */
        .page-title {
            font-size: 20px;
            font-weight: 500;
            color: var(--td-text-color-secondary);
            margin-bottom: 16px;
            text-align: center;
            width: 100%;
        }
    </style>
</head>
<body class="bg-gray-200">
    <header class="bg-white shadow-md py-6">
        <div class="container mx-auto">
            <h1 class="text-2xl font-bold text-center text-purple-700">《她与月亮的约定》小程序原型</h1>
            <p class="text-center text-gray-600 mt-2">基于TDesign设计风格的界面原型</p>
        </div>
    </header>

    <div class="page-container">
        <div class="page-title">首页</div>
        <div class="iphone-mockup">
            <div class="notch"></div>
            <iframe src="home.html" class="screen-content"></iframe>
        </div>

        <div class="page-title">记录页</div>
        <div class="iphone-mockup">
            <div class="notch"></div>
            <iframe src="record.html" class="screen-content"></iframe>
        </div>

        <div class="page-title">知识页</div>
        <div class="iphone-mockup">
            <div class="notch"></div>
            <iframe src="knowledge.html" class="screen-content"></iframe>
        </div>

        <div class="page-title">我的</div>
        <div class="iphone-mockup">
            <div class="notch"></div>
            <iframe src="profile.html" class="screen-content"></iframe>
        </div>
    </div>
</body>
</html>
